// 该页面为系统角色管理页面，已归类到 system 目录
<template>
  <div>
    <!--  搜索栏  -->
    <TableSearch :query="param" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <!--表格-->
      <TableCustom
        :columns="columns"
        :table-data="tableData"
        :total="total"
        :view-func="handleView"
        :del-func="handleDelete"
        :page-change="changePage"
        :edit-func="handleEdit"
      >
        <!--左上角新增按钮-->
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="handleAdd">新增</el-button>
        </template>
        <!--状态列-->
        <template #status="{ row }">
          <el-tag v-if="row.status == 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
        <!--菜单管理列-->
        <template #menus="{ row }">
          <el-button type="primary" size="small" plain @click="handlePermission(row)">
            管理
          </el-button>
        </template>
      </TableCustom>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      v-model="visible"
      :title="isEdit ? '编辑' : '新增'"
      width="700px"
      destroy-on-close
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <TableEdit
        :form-data="rowData"
        label-width="100px"
        :span="24"
        :columns="editColumns"
        :edit="isEdit"
        :update="updateData"
      />
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog v-model="viewVisible" title="查看详情" width="700px" destroy-on-close>
      <TableDetail :row="viewRow" :columns="viewColums" :column="1">
        <template #status="{ rows }">
          <el-tag v-if="rows.status" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </TableDetail>
    </el-dialog>
    <!-- 菜单管理 -->
    <el-dialog v-model="manageVisible" title="菜单管理" width="500px" destroy-on-close>
      <TreeManage
        :manage-id="manageId"
        :manage-data="manageMenus"
        label="title"
        :manage-tree="menuTree"
        :submit="updateRoleMenus"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { menus, menusUpdate, page, remove, saveOrUpdate } from '@/api/role.ts'
  import { Role, RolePageParam, RoleSaveOrUpdateParam } from '@/types'

  import TableCustom from '@/components/common/TableCustom.vue'
  import TableDetail from '@/components/common/TableDetail.vue'

  import { CirclePlusFilled } from '@element-plus/icons-vue'
  import TableEdit from '@/components/common/TableEdit.vue'
  import TableSearch from '@/components/common/TableSearch.vue'
  import TreeManage from '@/components/common/TreeManage.vue'
  import { ElMessage } from 'element-plus'
  import { FormOption, TableColumns } from '@/types/form-option.ts'
  import { menuTreeList } from '@/api/menu.ts'

  // 查询参数
  const param = reactive<RolePageParam>({
    roleName: '',
    pageNum: 1,
    pageSize: 10,
  })
  //搜索配置
  const searchOpt = ref<FormOption[]>([{ type: 'input', label: '角色名称：', prop: 'roleName' }])
  //搜索方法
  const handleSearch = () => {
    changePage(1)
  }

  // 表格字段配置
  let columns = ref<TableColumns[]>([
    { type: 'index', prop: '', label: '序号', width: 55, align: 'center' },
    { prop: 'roleName', label: '角色名称' },
    { prop: 'roleKey', label: '角色标识' },
    { prop: 'status', label: '状态' },
    { prop: 'menus', label: '菜单管理' },
    { prop: 'operator', label: '操作', width: 250 },
  ])

  //表格数据
  const tableData = ref<Role[]>([])
  //总数
  const total = ref(0)
  //查询分页
  const getData = async () => {
    const data = await page(param)
    tableData.value = data.records
    total.value = data.total
  }
  //初始化查询
  getData()
  //跳转页码
  const changePage = (val: number) => {
    param.pageNum = val
    getData()
  }

  // 新增/编辑弹窗配置
  const editColumns = ref([
    { type: 'input', label: '角色名称', prop: 'roleName', required: true },
    { type: 'input', label: '角色标识', prop: 'roleKey', required: true },
    {
      type: 'switch',
      label: '状态',
      prop: 'status',
      required: false,
      activeValue: '1',
      inactiveValue: '0',
      activeText: '启用',
      inactiveText: '禁用',
    },
  ])
  //新增编辑显示弹窗
  const visible = ref(false)
  //是否修改
  const isEdit = ref(false)
  //操作数据
  const rowData = ref({})
  const handleAdd = () => {
    rowData.value = {}
    isEdit.value = false
    visible.value = true
  }
  //修改
  const handleEdit = (row: Role) => {
    rowData.value = { ...row }
    isEdit.value = true
    visible.value = true
  }
  //更新数据
  const updateData = async (data: RoleSaveOrUpdateParam) => {
    await saveOrUpdate(data)
    ElMessage.success('保存成功')
    closeDialog()
    await getData()
  }
  //关闭弹窗
  const closeDialog = () => {
    visible.value = false
    isEdit.value = false
    rowData.value = {}
  }

  // 显示查看详情弹窗
  const viewVisible = ref(false)
  //显示弹窗配置
  const viewRow = ref({})
  const viewColums = ref([
    { prop: 'id', label: '角色ID' },
    { prop: 'roleName', label: '角色名称' },
    { prop: 'roleKey', label: '角色标识' },
    { prop: 'status', label: '角色状态' },
  ])

  const handleView = (row: Role) => {
    viewRow.value = { ...row }
    viewVisible.value = true
  }

  // 删除相关
  const handleDelete = async (row: Role) => {
    await remove({ id: row.id })
    ElMessage.success('删除成功')
    await getData()
  }

  // 菜单管理弹窗相关
  const menuTree = ref()
  const getMenuTree = async () => {
    menuTree.value = await menuTreeList({})
  }
  getMenuTree()
  const manageVisible = ref(false)
  const manageId = ref()
  const manageMenus = ref()

  const handlePermission = async (row: Role) => {
    manageId.value = row.id
    let data = await menus({ id: row.id })
    manageMenus.value = data.menus
    manageVisible.value = true
  }
  //关闭管理弹窗
  const closeManageDialog = () => {
    manageVisible.value = false
  }
  //更新角色菜单关系
  const updateRoleMenus = async (id: string | number, menus: Array<string | number>) => {
    //更新角色菜单关联
    await menusUpdate({ id: id, menus: menus })
    ElMessage.success('更新成功')
    closeManageDialog()
  }
</script>

<style scoped></style>
